<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统首页</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <link href="../Mall/js/elment.css" rel="stylesheet">
    <script src="../Mall/js/main.js"></script>
    <!--    引入首页样式-->
    <link href="../admin/favicon.ico" rel="shortcut icon"/>
    <link href="../admin/indexCss.css" rel="stylesheet" type="text/css">

    <style>
        body {

            position: relative;
            color: rgba(0, 0, 0, 0.68)
        }

        a {
            color: rgba(0, 0, 0, 0.68);
            cursor: pointer; /*加手图标*/
            text-decoration: none;
        }

        a:hover {
            color: #24407EAD;
        }

        #topdiv > div {
            margin: 60px 0;

        }

        #div-bot {
            position: relative;
            bottom: 5px;
        }

        #div-bot > p > b {
            color: #F1393A;
            font-size: 35px;
            font-weight: 1000;
        }

        #div-car > div > div {
            float: left;
            overflow: hidden;

        }

        #div-car1 > div > div {
            float: left;
            overflow: hidden;

        }
        #numbers{
            width: 100%;height: 25px;margin-bottom: 10px;border-radius: 5px;
            /*通过padding-left的值让文字居中*/
            padding-left: 42%;
            background-color: rgba(208, 208, 208, 0.66);
            /*清除select的边框样式*/
            border: none;
        }
        #numbers>option{
            background-color: rgba(243, 242, 242, 0.33);
            /*将select的宽高等于div的宽高*/
            width: 100%;
            height: 25px;
            line-height: 23px;

        }

    </style>
    <!--    引入首页样式-->
    <link href="../admin/indexCss.css" rel="stylesheet" type="text/css">
</head>
<body>

<myheader></myheader>


<section>

    <div class="container" style="margin-top: 60px;padding: 0">
        <!--            购物车商品列表-->
        <div  style="position: fixed; width:130px;left: 230px;top: 65px">
            <table class="table table-hover" style="color: #070707">
                <tr>
                    <td>
                        <label>根据用户筛选</label><br>
                        <el-button @click="drawer = true" style="width: 120px;" type="primary">
                            用户列表
                        </el-button>
                        <el-drawer
                                :append-to-body="true"
                                :close-on-press-escape="true"
                                :modal="false"
                                :visible.sync="drawer"
                                :with-header="false"
                                title="用户列表信息">
<!--                            <div class="col-md-12" style="height: 70px"></div> &lt;!&ndash;做隔断&ndash;&gt;-->
                            <h3 style="text-align: center">用户列表</h3>
                            <table class="table table-hover"  style="color: #070707">
                                <tr class="info">
                                    <td>
                                        <div class="p-msg ">
                                            <label>用户个数:</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="p-msg ">
                                            <label>总销售额:</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="p-msg ">
                                            <label v-show="xuan==1">今日销售额:</label>
                                            <label v-show="xuan==2">今日销售数量:</label>
                                            <label v-show="xuan==3">本月销售额:</label>
                                            <label v-show="xuan==4">本月销售数量:</label>
                                            <label v-show="xuan==5">本年销售额:</label>
                                            <label v-show="xuan==6">本年销售数量:</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="p-msg ">
                                            <label>总销售量:</label>
                                        </div>
                                    </td>
                                </tr>
                                <tr >
                                    <td>
                                        <span class="p-name" v-show="users.length!=null">{{users.length}}</span><span
                                            v-show="users.length==null">0</span><span>个</span></td>
                                    </td>
                                    <td>
                                        <div class="col-md-3 yuan">{{mon.commodityMoneyAll}}<span v-show="mon.commodityMoneyAll==null">0</span><p>元</p></div>
                                    </td>
                                    <td>
                                        <div v-show="xuan==1">{{mon.commodityMoneyDay}}<span v-show="mon.commodityMoneyDay==null">0</span><p>元</p></div>
                                        <div v-show="xuan==2">{{mon.commoditySumDay}}<span v-show="mon.commoditySumDay==null">0</span><p>件商品</p></div>
                                        <div v-show="xuan==3">{{mon.commodityMoneyHour}}<span v-show="mon.commodityMoneyHour==null">0</span><p>元</p></div>
                                        <div v-show="xuan==4">{{mon.commoditySumHour}}<span v-show="mon.commoditySumHour==null">0</span><p>件商品</p></div>
                                        <div v-show="xuan==5">{{mon.commodityMoneyYear}}<span v-show="mon.commodityMoneyYear==null">0</span><p>元</p></div>
                                        <div v-show="xuan==6">{{mon.commoditySumYear}}<span v-show="mon.commoditySumYear==null">0</span><p>件商品</p></div>
                                    </td>
                                    <td>
                                        {{mon.commoditySumAll}}<span v-show="mon.commoditySumAll==null">0</span><p>件商品</p>
                                    </td>
                                </tr>
                                <tr>
                                    <select id="numbers"  v-model="xuan" >
                                        <option value="1">今天销售额</option>
                                        <option value="2">今天销售数量</option>
                                        <option value="3">本月销售额</option>
                                        <option value="4">本月销售数量</option>
                                        <option value="5">本年销售额</option>
                                        <option value="6">本年销售数量</option>
                                    </select>
                                </tr>
                                <tr>
                                    <td colspan="4">

                                        <table class="table table-hover">
                                            <tr>
                                                <td><a href="UserTrans.html"><i class="el-icon-back"></i><b>总订单</b></a></td>
                                            </tr>
                                            <tr class="info">
                                                <td>用户名(点我试试)</td>
                                                <td>消费</td>
                                                <td>商品数</td>
                                            </tr>
                                            <tr v-for="(u,i) in users">
                                                <td><a :href="'UserTransOne.html?username='+u.username">{{u.username}}</a></td>
                                                <td><span v-show="u.price!=null" v-text="u.price"></span><span
                                                        v-show="u.price==null">0</span><span>元</span></td>
                                                <td><span v-show="u.sum!=null" v-text="u.sum"></span><span v-show="u.sum==null">0</span><span>个</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

                        </el-drawer>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <template>
                            <div class="block">
                                <label>根据日期筛选</label><br>
                                <el-date-picker
                                        :clearable="true"
                                        align="right"
                                        end-placeholder="结束"
                                        range-separator=":"
                                        start-placeholder="开始"
                                        type="datetimerange"
                                        style="width: 120px"
                                        v-model="date2">
                                </el-date-picker>
                            </div>
                        </template>

                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <template>
                            <label>根据商品名筛选</label><br>
                            <el-select clearable placeholder="请选择" v-model="comname">
                                <el-option
                                        :key="i"
                                        :label="item.name"
                                        :value="item.name"
                                        v-for="(item,i) in coms">
                                </el-option>
                            </el-select>
                        </template>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-md-2" style="width: 120px;"></div>
        <div class="col-md-10" style="color: black;margin-left: 50px">

            <table class="table table-hover">
                <tr>
                    <td >
                        <div class="col-md-12" style="height: 100%;font-size: 15px">  <!--设置可见状态-->
                            <div class="p-msg col-md-4">
                                <label>订单总数:</label>
                                <b class="p-name" style="color:#ff5a5a;">{{tranSum}}</b>
                                <span class="p-name">个</span>
                            </div>
                            <div class="p-msg col-md-4">
                                <label>商品总数:</label>
                                <b class="p-name" style="color:#ff5a5a;">{{comSum}}</b>
                                <span class="p-name">个</span>
                            </div>
                            <div class="p-msg col-md-4">
                                <label>订单总价:</label>
                                <b class="p-name" style="color:#ff5a5a;">{{priceAll}}</b>
                                <span class="p-name">元</span>
                            </div>
                            <div class="p-msg col-md-2">


                            </div>
                            <div class="p-msg col-md-3">

                            </div>
                            <div class="p-msg col-md-1">

                            </div>

                        </div>
                    </td>
                </tr>
                <tr v-for="(t,i) in trans" v-show="date2.length==0 || (new Date(t.created).getTime()>date2[0].getTime()
                            && new Date(t.created).getTime()<date2[1].getTime())">
                    <td>
                        <div class="col-md-12" id="div-car" style="height: 100%;font-size: 15px">  <!--设置可见状态-->
                            <div class="p-msg col-md-2">
                                <label>订单编号:</label>
                                <span class="p-name">{{t.id}}</span>
                            </div>
                            <div class="p-msg col-md-2">
                                <label>商品数量:</label>
                                <span class="p-name">{{t.comsum}}</span>
                            </div>
                            <div class="p-msg col-md-2">
                                <label>订单总价:</label>
                                <span class="p-name">{{t.price}}</span>
                            </div>
                            <div class="p-msg col-md-2">
                                <label>创建时间:</label>
                                <span class="p-name">{{t.created}}</span>
                            </div>
                            <div class="p-msg col-md-2">
                                <label>商品:</label>
                                <ol style="list-style-type: none" v-for="c in t.comTrans">
                                    <a :href="'/admin/admin/adminindexOneId.html?id='+c.comId" STYLE="color:#F96B6C;font-size: 15px">
                                        <i aria-hidden="true" class="fa fa-arrow-right">{{c.name}}</i></a>
                                </ol>
                            </div>
                            <div class="p-msg col-md-2">
                                <div style="float:right;width: 35px;">
                                    <button @click="showTransOne(t.id)" class="btn btn-success btn-sm"
                                            style="float: right;margin-top:40px;border-radius: 10px" type="button">
                                        <i aria-hidden="true" class="fa fa-arrow-right fa-lg"> </i>
                                    </button>
                                    <del v-if="t.state==0">该订单已删除!</del>
                                </div>

                            </div>

                        </div>
                    </td>
                </tr>
            </table>
        </div>
        </td>
        </tr>
        </table>
    </div>

    </div>


</section>

<!--正文在这里继续-->

<!--<myfooter></myfooter>-->
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<!--导入弹窗组件-->
<script src=" https://unpkg.com/sweetalert/dist/sweetalert.min.js "></script>
<!--引入vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入footer-->
<!--<script src="adminjs/footer.js"></script>-->
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    Array.prototype.contains = function (obj) {
        var index = this.length;
        while (index--) {
            if (this[index] === obj) {
                return true;
            }
        }
        return false;
    }
</script>
<script>

    let section_v1 = new Vue({
        el: "body>section",
        data: {
            users: [],
            userid: 0,
            trans: [],
            comname:'',
            drawer: false, //抽屉用
            date2:[],
            coms:[], //所有商品
            mon: {},
            xuan:1,
            priceAll:0, //订单总价
            tranSum:0, //订单总数
            comSum:0 ,//商品总数
            options: [] //下拉框
            ,aaa:["米其林","马牌","北京烤鸭","龙须面"]
        },
        created: function () {
            let username = location.search.split("=")[1]
            axios.get("/trans/AllOne?username=" + username).then(function (response) {
                section_v1.trans = response.data;
                if (section_v1.trans == null || section_v1.trans.length == 0) {
                    section_v1.blankMsg = "空空如也!"
                }else {
                    section_v1.jisuan()
                }

                // section_v1.tranSum = section_v1.trans.length

            })
            axios.post("/admin/selectToCommodity").then(function (response) {
                section_v1.coms = response.data;
            }),
            axios.get("/mall/getUsers").then(function (response) {
                section_v1.users = response.data;
            })
            axios.get("/trans/selectToComMoney").then(function (response) {
                section_v1.mon = response.data
            })
        },
        methods: {
            jisuan:function (){
                for (var t=0;t<section_v1.trans.length;t++){
                    section_v1.priceAll = section_v1.priceAll+section_v1.trans[t].price;
                    section_v1.comSum = section_v1.comSum+section_v1.trans[t].comsum;
                    section_v1.tranSum++
                }
            },
            comnameIndexOf:function (){
                alert(section_v1.aaa.contains(section_v1.comname))
                for (c in section_v1.comtrans){
                    if (!c.comTrans.contains(section_v1.comname)){
                        document.getElementById('trans'+c.id).style.display("none");
                    }
                }
            },
            showTransOne: function (id) {
                location.href = 'transOne.html?id=' + id
            },
        }
    })


</script>


<!--背景线条-->
<script src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js" type="text/javascript"></script>
　
<!--右键出字体-->
<script src="../adminjs/bg.js"></script>
　
<!--引入header-->
<script src="../adminjs/header.js"></script>
<!--引入动态背景js文件-->
<!--<script src="../bgjs2.js"></script>-->
</body>
</html>